<template>
  <div class="bk">
    <el-row>
      <el-col :span="8" :offset="8">
        <el-card class="loginDiv">
          <h2 class="title">大学生心灵港湾</h2>
          <LoginForm @forgotPassword="forgotPassword"></LoginForm>
        </el-card>
      </el-col>
    </el-row>
    <div class="bottom-icp">
      <el-link type="primary" href="http://beian.miit.gov.cn/">
        网站备案号: 湘ICP备2024041497号-1
      </el-link>
    </div>
    <ForgotPassWord ref="forgotPassword"></ForgotPassWord>
  </div>
</template>

<script>
import LoginForm from "@/components/login/LoginForm.vue";
import ForgotPassWord from "@/components/common/ForgotPassWord.vue";
export default {
  name: "Login",
  components: {
    LoginForm,
    ForgotPassWord,
  },
  methods: {
    //忘记密码
    forgotPassword() {
      //调用子组件方法
      this.$refs.forgotPassword.showForgetPasswordDialog();
    },
  },
};
</script>

<style scoped>
.bk {
  background: url("@/assets/imgs/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  bottom: 0;
  right: 0;
}

.loginDiv {
  width: 100%;
  margin-top: 300px;
  height: 350px;
  background-color: rgba(255, 255, 255, 0.9);
}

.title {
  text-align: center;
}

.bottom-icp {
  margin-top: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>